import React from 'react'
import styled from 'styled-components'

const Input = (props: Props) => {
    const { ...restProps } = props
    return <Container {...restProps} />
}

const Container = styled.input`
	display: block;
	font-size: 14px;
	padding: 0 0 0 32px;
	height: ${({ fullHeight }) => (fullHeight ? fullHeight : '36px')}
	width: ${({ fullWidth }) => (fullWidth ? fullWidth : '300px')}
	
	border: 1px solid #ccc;
    border-radius: ${({ radius, fullHeight }) =>
        radius ? (fullHeight ? fullHeight / 2 : '18px') : 0};
    background-color: #eee;
    &:focus{
    	outline: none;
    	background-color: #fff;
    }
`

export default Input



// WEBPACK FOOTER //
// ./src/components/Input/index.js